<template>
  <div>
    <h1>用户权限页面测试</h1>
    <xnzw-table
      :columns="columns"
      :hasSelection="hasSelection"
      :dataSource="dataSource"
      :totalCount="totalCount"
      :rowClick="rowClick"
      :operation="operation"
      :cellClassName="cellClassName"
      @selectionChange="selectionChange"
      @pageSizeChange="pageSizeChange"
      @currentPageChange="currentPageChange"
      @handleEdit="handleEdit"
      @handleDelete="handleDelete"
      >
    </xnzw-table>
    <br/>
    <xnzw-select
      :options="selectOptions"
      @change="changeValue">
    </xnzw-select>
    <br/>
    <!--测试dialog-->
    <el-button type="text" @click="showDialog = true">点击打开 Dialog</el-button>
    <xnzw-dialog
      :showDialog="showDialog"
      :dialogTitle="dialogTitle"
      :width="width"
      :fullscreen="fullscreen"
      :appendToBody="appendToBody"
      @close="close"
      @dialogClose="close"
      @dialogSure="dialogSure">
      <div slot="dialogContent">
        <el-form :model="ruleForm2" status-icon ref="ruleForm2" label-width="100px" class="demo-ruleForm">
          <el-form-item label="密码" >
            <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model.number="ruleForm2.age"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
            <el-button @click="resetForm('ruleForm2')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </xnzw-dialog>
    <br/>
    <el-button type="text" @click="editorSave">获取editor的值</el-button>
    <!--加入editor-->
    <vue-editor class="editor"
      id="editor"
      v-model="editorContent">
    </vue-editor>
    <!--测试阿里子图标-->
    <div class="al-icon al-icon-playon_fill"></div>
    <br/>
    <!--测试tab加载不同的组件-->
    <el-tabs type="border-card" @tab-click="tabClick">
      <!--
        <el-tab-pane>
        <span slot="label"><i class="el-icon-date"></i> 我的行程</span>
        我的行程
      </el-tab-pane>
      -->
      <el-tab-pane v-for="tab in tabs"  :label="tab.label">
        <component v-bind:is="which_to_show"></component> 
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// import tmTable from '@/components/table'
// import xnzwSelect from '@/components/select'
// import xnzwDialog from '@/components/dialog'

import xhome  from '@/modules/home/home'
import table from '@/components/table'

export default {
  name: 'userRole',
  components: {xhome},
  data () {
    return {
      hasSelection: true,
      columns: [
        {
          prop: 'id', // 表格的field
          label: 'id', // 表格标题文字
          hasShow: true, // 是否显示，如不影藏数据
          hasSort: true, // 是否排序
          fixed: false // 是否固定
          // width: '', // 宽度可以定义，
          // formatter: function (row, column, cellValue, index) {  // 格式化单元格的样式，添加的class
          //   if (cellValue === '2') {
          //     return '我是2'
          //   }
          //   return cellValue
          // }
        },
        {
          prop: 'name',
          label: 'name',
          hasShow: true,
          hasSort: true,
          fixed: false
          // align: 'left'
          // width: '',
          // formatter: function (row, column, cellValue, index) {
          //   return cellValue
          // }
        }
      ],
      dataSource: [
        {
          id: '1',
          name: '小明'
        },
        {
          id: '2',
          name: '小张'
        },
        {
          id: '3',
          name: '小李'
        },
        {
          id: '4',
          name: '小七'
        }
      ],
      totalCount: 400,
      cellClassName: function (row, column, rowIndex, columnIndex) {
        // console.log(row)
        if (row.column.label && row.column.label === 'id' && row.row.id === '1') {
          return 'el-class'
        }
      },
      // 操作按钮
      operation: [
        {
          type: 'primary',
          size: 'small',
          text: '修改',
          id: '1',
          fn: 'handleEdit'
        },
        {
          type: 'primary',
          size: 'small',
          text: '删除',
          id: '2',
          fn: 'handleDelete'
        }
      ],
      selectOptions: [
        {
          value: '1',
          label: '小明'
        },
        {
          value: '2',
          label: '小张'
        }
      ],
      multiple: false,
      filterable: true,
      clearable: true,
      showDialog: false,
      dialogTitle: '新增',
      width: '30%',
      fullscreen: false,
      appendToBody: true,
      ruleForm2: {
        pass: '',
        checkPass: '',
        age: null
      },
      editorContent: '我是测试内容',
      tabs: [
        {
          label: '我的行程',
          name: 'xhome'
        },
        {
          label: '我的测试',
          name: 'table'
        }
      ],
      which_to_show: 'xhome'
      // customEditorToolbar: [
      //   ['bold', 'italic', 'underline'],
      //   [{list: 'ordered'}, {list: 'bullet'}]
      // ]
    }
  },
  methods: {
    // 当表格选择变化时，触发事件，传递变化后的数组
    selectionChange: function (arr) {
      console.log(arr)
    },
    // 页数变化后触发事件，传递当前变化后的数据
    pageSizeChange: function (val) {
      console.log(val)
    },
    // 选择第几页变化后触发的事件
    currentPageChange: function (val) {
      console.log(val)
    },
    // 点击了行
    rowClick: function (row, event, column) {
      console.log(row)
    },
    handleEdit: function (index, row) {
      console.log(index)
      console.log(row)
    },
    handleDelete: function (index, row) {
      console.log(index)
      console.log(row)
    },
    // select 选择后传递值
    changeValue: function (val) {
      // console.log(val)
    },
    // 自组件传递到父组件中的值
    close: function () {
      this.showDialog = false
    },
    dialogSure: function () {
      console.log(this.ruleForm2)
      this.showDialog = false
    },
    submitForm: function () {
      console.log('我是提交按钮')
    },
    // editor 保存获取值
    editorSave: function () {
      console.log(this.editorContent)
    },
    // tabs标签选中时触发事件
    tabClick: function (tab, a) {
      // 数组长度下标
      let index_val = tab.index
      if (index_val === '1') {
        this.which_to_show = 'table'
      } else {
        this.which_to_show = 'xhome'
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>

</style>
